<template>
  <el-dialog v-dialogDrag :visible.sync="dialogVisible" title="保养项设置" width="1000px" @close="clostBtn()">
    <button-group ref="buttonGroup" @cancel="dialogVisible = false" />
    <div class="formTopFont">保养设置</div>
    <el-row>
      <el-col :span="12" style="padding-right:5px;">
        <h1 class="titleH1">保养分类列表</h1>
        <el-table border height="450px" ref="tabData" row-key="id" stripe highlight-current-row @row-click="handClick" :data="classifyList">
          <el-table-column width="35px" align="center">
            <template slot-scope="scope">
              <el-radio v-model="radio" :label="scope.row.id">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="classifyName" label="分类名称" align="center" />
          <el-table-column prop="classifyCode" label="分类编码" align="center" />
          <el-table-column prop="cycle" label="周期" align="center" />
        </el-table>
      </el-col>
      <el-col :span="12" style="padding-left:5px;">
        <h1 class="titleH1">【{{objInfo.classifyName}}】保养项列表</h1>
        <el-table border height="450px" stripe :data="itemTabList">
          <el-table-column prop="itemName" label="保养项名称" align="center" />
          <el-table-column prop="itemCode" label="保养项编码" align="center" />
          <el-table-column prop="remark" label="保养项描述" align="center" />
        </el-table>
      </el-col>
    </el-row>
    <p style="text-align:right;">
      <el-button plain icon="el-icon-close" @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" icon="el-icon-check" :disabled="!radio" @click="saveBtn()">保存</el-button>
    </p>
  </el-dialog>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      radio: '',
      dialogVisible: false,
      keyword: '',
      classifyList: [],
      itemTabList: [],
      obj: {},
      objInfo: {},
      list: []
    }
  },
  watch: {},
  mounted() {},
  methods: {
    /**
     * @description: 新增编辑
     * @param {*} row
     * @return {*}
     */
    async showInfo(row) {
      this.obj = row
      this.$nextTick(() => {
        this.getClassify(row)
        this.dialogVisible = true
      })
    },
    async getClassify(row) {
      const res = await this.$axios.get(
        `/equip/maintain/infoRelation/getClassifyByInfo?equipId=${row.equipId}&keyword=${this.keyword}`
      )
      if (res?.data.code === 200) {
        this.classifyList = res.data.data
        if (this.classifyList.find((item) => item.isSelect === 1)) {
          const row = this.classifyList.find((item) => item.isSelect === 1)
          this.radio = row.id
          this.handClick(row)
        }
      }
    },
    handClick(row) {
      this.radio = row.id
      this.objInfo = row
      this.list = this.classifyList.filter((item) => item.id === row.id)
      this.getItemList(row)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    async getItemList(row) {
      const res = await this.$axios.get(
        `/equip/maintain/infoRelation/getItemListByClassify?id=${row.id}`
      )
      if (res?.data.code === 200) {
        this.itemTabList = res.data.data
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.tabData.toggleRowSelection(row)
        })
      } else {
        this.$refs.tabData.clearSelection()
      }
    },
    /**
     * @description: 提交
     * @param {*} formName
     * @return {*}
     */
    async saveBtn() {
      if (this.itemTabList.length > 0) {
        const res = await this.$axios.post(
          '/equip/maintain/infoRelation/saveRelation',
          { classifyId: this.list[0].id, equipId: this.obj.equipId }
        )
        if (res?.data.code === 200) {
          this.$notify.success('提交成功！')
          this.dialogVisible = false
          this.$emit('getTableInfo')
        } else {
          this.$notify.error(res.data.msg)
        }
      } else {
        this.$alert(
          `请先维护【${this.list[0].classifyName}】保养项 !`,
          '提示',
          {
            confirmButtonText: '确认',
            type: 'warning'
          }
        )
      }
    },
    clostBtn() {
      this.radio = ''
      this.classifyList = []
      this.itemTabList = []
      this.obj = {}
      this.objInfo = {}
      this.list = []
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
